<template>
    <div class="Preson">
        <h2>watch监视【ref】定义的【对象类型】数据</h2>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePreson">修改人</button>
    </div>
</template>

<script lang="ts" setup>
import {  watch,ref, reactive } from 'vue'

let person = ref({
    name: '张三',
    age:20
})
function changeName() {
    person.value.name += '~'
}
function changeAge() {
    person.value.age += 1
}

function changePreson() {
   person.value={name:'lisi',age:18}
}

/* 监视，情况一: 监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视(deep)
watch的第一个参数是:被监视的数据
watch的第二个参数是:监视的回调
watch的第三个参数是:配置对象(deep、immediate等等.....)
*/

watch(person,(newValue,oldValue) => {
    console.log('preson变化了',newValue,oldValue);
},{deep:true})

</script>

<style scoped>
.Preson {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button { 
    margin: 0 10px;
}
</style>